<template>
	<div
		class="inline-block relative"
		:class="{
			'w-[24px] h-[24px]': type == 'big',
			'w-[22px] h-[22px]': type == 'default',
			'w-[20px] h-[20px]': type == 'small'
		}"
	>
		<img :src="formatBallColorSrc" class="w-full h-full object-cover block" />
		<span
			class="num"
			:class="{
				'text-[12px]': type == 'default',
				'text-[10px]': type == 'small'
			}"
			>{{ num < 10 ? "0" + num : num }}</span
		>
	</div>
</template>
<script setup>
import redImg from "@/assets/images/lottery-ball/lhc/red.png";
import blueImg from "@/assets/images/lottery-ball/lhc/blue.png";
import greenImg from "@/assets/images/lottery-ball/lhc/green.png";

const props = defineProps({
	num: {
		type: [Number, String],
		default: 1
	},
	type: {
		type: String,
		default: "default" // default, small
	}
});
const state = reactive({
	redBall: [0, 1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46],
	blueBall: [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 47, 48],
	greenBall: [5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 49]
});
// 获取球的颜色
const formatBallColorSrc = computed(() => {
	if (state.redBall.includes(props.num)) {
		return redImg;
	} else if (state.blueBall.includes(props.num)) {
		return blueImg;
	} else if (state.greenBall.includes(props.num)) {
		return greenImg;
	}
});
</script>
<style lang="scss" scoped>
.num {
	position: absolute;
	top: 43%;
	left: 47%;
	transform: translate(-50%, -50%);
}
</style>
